<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            margin: 0;
            padding: 0;
            color: red;
        }
    </style>
</head>

<body>
    <div class="form">
        <div>
            姓名: <input type="text" class="username" placeholder="请输入姓名">
        </div>
        <div>
            年龄: <input type="number" class="age" placeholder="请输入年龄(10-100)">
        </div>
        <div>
            身高: <input type="number" class="height" placeholder="请输入身高">
        </div>
        <div>
            电话: <input type="tel" class="tel" placeholder="请输入正确的手机号">
        </div>

        <button class="btn">添加</button>
    </div>

    <br>
    <table class="table" border="1" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>
    <script>
        let username = document.querySelector('.username')
        let age = document.querySelector('.age')
        let height = document.querySelector('.height')
        let tel = document.querySelector('.tel')
        let btn = document.querySelector('.btn')
            //给按钮添加点击事件点击一次表格加一行
        btn.addEventListener('click', function() {
                let table = document.querySelector('.table')
                let tr = document.createElement('tr')
                tr.innerHTML = `
            <td>${username.value}</td>
            <td>${age.value}</td>
            <td>${height.value}</td>
            <td>${tel.value}</td>
            <td class='del'>删除</td>
            `
                table.appendChild(tr)
            })
            // username.addEventListener('mouseleave', function() {
            //     console.log(username.parentNode);
            //     if (this.value === '') {
            //         if (this.nextElementSibling) {
            //             return
            //         }
            //         let p = document.createElement('p')
            //         p.textContent = '姓名不能为空'
            //         username.parentNode.appendChild(p)
            //     }
            // })
        let tab = document.querySelector('.table')
        tab.addEventListener('click', function(e) {
            e.target.parentNode.remove()

        })
    </script>
</body>

</html>